<template>
  <prism-editor class="my-editor" v-model="code" :highlight="highlighter" line-numbers></prism-editor>
  <button @click="aa(code)">666</button>

</template>

<script>
import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
import { highlight, languages } from 'prismjs/components/prism-core';
import {yaml2json} from "@/util/js-yaml";
import {useErrorMessage} from "@/util";

export default {
  components: {
    PrismEditor,
  },
  data: () => ({ code: 'console.log("Hello World")' }),
  methods: {
    highlighter(code) {
      return highlight(code, languages.js,'js'); // languages.<insert language> to return html with markup
    },
    aa:(code)=>{
      console.log(code)
      yaml2json(code,false)
      console.log(yaml2json(code, false));
      if (yaml2json(code,false).error){
        useErrorMessage(yaml2json(code,false).data)
      }
    }
  },
};
</script>

<style>
/* required class */
.my-editor {
  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
  background: #2d2d2d;
  color: #ccc;
  /* you must provide font-family font-size line-height. Example: */
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
  height: 500px;
}

/* optional class for removing the outline */
.prism-editor__textarea:focus {
  outline: none;
}
</style>